<template>
  <div class="wrap">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="8" class="mb-2">
        <div class="card orderbg">
          <div class="flex align-center">
            <el-icon class="itemicon" size="60"><Tickets /></el-icon>
            <div class="content flex-1 ml-1">
              <div class="flex mb-1 justify-between align-bs">
                <div>
                  <span class="font-sm tit pr-1">昨日:</span>
                  <span class="font-lg num font-weight-bold">{{
                    totalData.order_yday_num
                  }}</span
                  ><span class="font-sm pl">笔</span>
                </div>
                <div>
                  <span class="font-lg num font-weight-bold">{{
                    totalData.order_yday_money
                  }}</span
                  ><span class="font-sm pl">RM</span>
                </div>
              </div>
              <div class="flex justify-between align-bs">
                <div>
                  <span class="font-sm tit pr-1">当月累计:</span>
                  <span class="font-lg num font-weight-bold">{{
                    totalData.order_month_money
                  }}</span
                  ><span class="font-sm pl">笔</span>
                </div>
                <div>
                  <span class="font-lg num font-weight-bold">{{
                    totalData.order_month_money
                  }}</span
                  ><span class="font-sm pl">RM</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="8" class="mb-2">
        <div class="card livebg">
          <div class="flex align-center">
            <el-icon class="itemicon" size="60"><VideoCamera /></el-icon>
            <div class="content flex-1 ml-1">
              <div class="flex mb-1 justify-between align-bs">
                <div>
                  <span class="font-sm tit pr-1">昨日场次:</span>
                  <span class="font-lg num font-weight-bold">{{
                    totalData.live_yday_num
                  }}</span
                  ><span class="font-sm pl">笔</span>
                </div>
                <div>
                  <span class="font-sm tit pr-1">得标金额:</span>
                  <span class="font-lg num font-weight-bold">{{
                    totalData.live_yday_money
                  }}</span
                  ><span class="font-sm pl">RM</span>
                </div>
              </div>
              <div class="flex justify-between align-bs">
                <div>
                  <span class="font-sm tit pr-1">当月累计:</span>
                  <span class="font-lg num font-weight-bold">{{
                    totalData.live_month_num
                  }}</span
                  ><span class="font-sm pl">笔</span>
                </div>
                <div>
                  <span class="font-sm tit pr-1">得标金额:</span>
                  <span class="font-lg num font-weight-bold">{{
                    totalData.live_month_money
                  }}</span
                  ><span class="font-sm pl">RM</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>

      <el-col :xs="24" :sm="24" :md="8" class="mb-2">
        <div class="card cartbg">
          <div class="flex align-center">
            <el-icon class="itemicon" size="60"><ShoppingCart /></el-icon>
            <div class="content flex-1 ml-1">
              <div class="flex flex-column align-bs">
                <div class="mb-1">
                  <span class="font-sm tit pr-1">累计人数:</span>
                  <span class="font-lg num font-weight-bold">{{
                    totalData.cart_toal_person
                  }}</span>
                </div>
                <div>
                  <span class="font-sm tit pr-1">累计商品数量:</span>
                  <span class="font-lg num font-weight-bold">{{
                    totalData.cart_tatal_goods
                  }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <div>
      <el-card class="box-card order-card" shadow="hover">
        <template #header>
          <div :class="useLocale.isMob ? 'mob-card-header' : 'card-header'">
            <div class="flex align-center">
              <el-icon class="itemicon pr" size="20"><Tickets /></el-icon>
              <span class="font-weight-bold">订单数据</span>
            </div>
             <div v-if="useLocale.isMob" class="mt-1" style="width: 100%">
              <el-input
                v-model="mob.orderDesc"
                style="width: 100%"
                placeholder="请选择日期范围"
                :prefix-icon="Calendar"
                @click="mobOpenDate('order')"
              />
            </div>
            <div v-else style="width: 50%" class="flex align-end">
              <el-date-picker
                v-model="orderDate"
                type="daterange"
                size="large"
                :clearable="false"
                range-separator="To"
                start-placeholder="Start date"
                end-placeholder="End date"
                :disabled-date="disabledDateFun"
                @change="changeOrderDate"
              />
            </div>
          </div>
        </template>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="12" class="p-1">
            <myChart
              ref="orderCharts1"
              class="itemChart"
              :option="orderPrice"
            ></myChart>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" class="p-1">
            <myChart
              ref="orderCharts2"
              class="itemChart"
              :option="orderNum"
            ></myChart>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <div class="mt-2">
      <el-card class="box-card live-card" shadow="hover">
        <template #header>
          <div :class="useLocale.isMob ? 'mob-card-header' : 'card-header'">
            <div class="flex align-center">
              <el-icon class="itemicon pr" size="20"><VideoCamera /></el-icon>
              <span class="font-weight-bold">直播数据</span>
            </div>
            <div v-if="useLocale.isMob" class="mt-1" style="width: 100%">
              <el-input
                v-model="mob.liveDesc"
                style="width: 100%"
                placeholder="请选择日期范围"
                :prefix-icon="Calendar"
                @click="mobOpenDate('live')"
              />
            </div>
            <div v-else style="width: 50%" class="flex align-end">
              <el-date-picker
                v-model="liveDate"
                type="daterange"
                size="large"
                :clearable="false"
                range-separator="To"
                start-placeholder="Start date"
                end-placeholder="End date"
                :disabled-date="disabledDateFun"
                @change="changeLiveDate"
              />
            </div>
          </div>
        </template>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="8" :md="8" class="p-1">
            <myChart
              ref="orderCharts3"
              class="itemChart"
              :option="liveSession"
            ></myChart>
          </el-col>
          <el-col :xs="24" :sm="8" :md="8" class="p-1">
            <myChart
              ref="orderCharts4"
              class="itemChart"
              :option="livePrice"
            ></myChart>
          </el-col>
          <el-col :xs="24" :sm="8" :md="8" class="p-1">
            <myChart
              ref="orderCharts5"
              class="itemChart"
              :option="liveNum"
            ></myChart>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <nut-calendar
      v-model:visible="mob.visible"
      type="range"
      :default-value="mob.date"
      :start-date="mob.liveStart"
      :end-date="mob.liveEnd"
      @choose="mobChooseDate"
    >
    </nut-calendar>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, nextTick, reactive, toRefs } from "vue";
import MyChart from "./MyChart.vue";
import { dayjs } from "element-plus";
import {
  ShoppingCart,
  VideoCamera,
  Tickets,
  ArrowLeft,
  Calendar,
} from "@element-plus/icons-vue";
import { useLocaleStore } from "@/store/locales";
import { $getOrder, $getLive, $getTotal } from "@api/dashboard";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const useLocale = useLocaleStore();
const orderCharts1 = ref();
const orderCharts2 = ref();
const orderCharts3 = ref();
const orderCharts4 = ref();
const orderCharts5 = ref();
let defaultStart = dayjs().subtract(7, "day");
let defaultEnd = dayjs().subtract(1, "day");
const orderDate = ref([defaultStart, defaultEnd]);
const orderDateArr = getDatesInRange(defaultStart, defaultEnd);
const liveDate = ref([defaultStart, defaultEnd]);
const liveDateArr = getDatesInRange(defaultStart, defaultEnd);
let mob = reactive({
  visible: false,
  type: "",//手机日历控件 live or order
  liveDesc:
    dayjs(defaultStart).format("YYYY-MM-DD") +
    " To " +
    dayjs(defaultEnd).format("YYYY-MM-DD"),
  orderDesc:
    dayjs(defaultStart).format("YYYY-MM-DD") +
    " To " +
    dayjs(defaultEnd).format("YYYY-MM-DD"),
  date: [
    dayjs(defaultStart).format("YYYY-MM-DD"),
    dayjs(defaultEnd).format("YYYY-MM-DD"),
  ],
  liveStart: "2016-01-01",
  liveEnd: dayjs(defaultEnd).format("YYYY-MM-DD"),
});
let totalData = ref({
  order_yday_num: "",
  order_yday_money: "",
  order_month_num: "",
  order_month_money: "",
  live_yday_num: "",
  live_yday_money: "",
  live_month_num: "",
  live_month_money: "",
  cart_toal_person: "",
  cart_tatal_goods: "",
});
let orderPrice = ref({
  seriesData: [],
  title: "订单金额",
  xAxisData: orderDateArr,
  yAxisName: "金币(RM)",
});
let orderNum = ref({
  seriesData: [],
  title: "订单数量",
  xAxisData: orderDateArr,
  yAxisName: "笔数",
});
let liveSession = ref({
  seriesData: [],
  title: "直播场次",
  xAxisData: liveDateArr,
  yAxisName: "场次",
});
let livePrice = ref({
  seriesData: [],
  title: "得标金额",
  xAxisData: liveDateArr,
  yAxisName: "金币(RM)",
});
let liveNum = ref({
  seriesData: [],
  title: "得标数量",
  xAxisData: liveDateArr,
  yAxisName: "笔数",
});
onMounted(() => {
  getOrder();
  getLive();
  getTotal();
});
const getTotal = async () => {
  let res = await $getTotal();
  if (res.code == 0) {
    totalData.value = res.data;
  }
};
const getOrder = async () => {
   let params = {
      start_time: '',
      end_time: ''
    };
  if (useLocale.isMob) {
      params.start_time=mob.date[0];
      params.end_time=mob.date[1];
  } else {
      params.start_time=dayjs(orderDate.value[0]).format("YYYY-MM-DD");
      params.end_time=dayjs(orderDate.value[1]).format("YYYY-MM-DD");
    
  }
  let res = await $getOrder(params);
  if (res.code == 0) {
    orderPrice.value.seriesData = res.data.orderPrice;
    orderNum.value.seriesData = res.data.orderNum;
    orderPrice.value.xAxisData = getDatesInRange(
      params.start_time,
      params.end_time
    );
    orderNum.value.xAxisData = getDatesInRange(
      params.start_time,
      params.end_time
    );
    nextTick(() => {
      orderCharts1.value.setChartsOption(orderPrice.value);
      orderCharts2.value.setChartsOption(orderNum.value);
    });
  }
};
const getLive = async () => {
  let params = {
      start_time: '',
      end_time: ''
    };
  if (useLocale.isMob) {
      params.start_time= mob.date[0];
      params.end_time= mob.date[1];

  } else {
      params.start_time=dayjs(liveDate.value[0]).format("YYYY-MM-DD");
      params.end_time=dayjs(liveDate.value[1]).format("YYYY-MM-DD");

  }

  console.log(params);
  let res = await $getLive(params);
  if (res.code == 0) {
    liveSession.value.seriesData = res.data.liveSession;
    livePrice.value.seriesData = res.data.livePrice;
    liveNum.value.seriesData = res.data.liveNum;
    liveSession.value.xAxisData = getDatesInRange(
      params.start_time,
      params.end_time
    );
    livePrice.value.xAxisData = getDatesInRange(
      params.start_time,
      params.end_time
    );
    liveNum.value.xAxisData = getDatesInRange(
      params.start_time,
      params.end_time
    );
    nextTick(() => {
      orderCharts3.value.setChartsOption(liveSession.value);
      orderCharts4.value.setChartsOption(livePrice.value);
      orderCharts5.value.setChartsOption(liveNum.value);
    });
  }
};
const changeOrderDate = () => {
  getOrder();
};
const changeLiveDate = () => {
  getLive();
};
const disabledDateFun = (date) => {
  let now = dayjs().subtract(1, "day");
  if (date < now) return false;
  return true;
};
const mobOpenDate = (type) => {
  mob.visible = true;
  mob.type = type;
};
const mobCloseDate = () => {
  mob.visible = false;
};
const mobChooseDate = (param) => {
  console.log(mob.type);
  console.log(param);
  mob.date = [...[param[0][3], param[1][3]]];
  if (mob.type === "live") {
    mob.liveDesc = `${mob.date[0]} To ${mob.date[1]}`;
    getLive();
  } else {
    mob.orderDesc = `${mob.date[0]} To ${mob.date[1]}`;
    getOrder();
  }
};
const select = (param: string) => {
  console.log(param);
};
function getDatesInRange(startDateString: string, endDateString: string) {
  // console.log(startDateString);
  const start = new Date(startDateString); // 将字符串转换为日期对象
  const end = new Date(endDateString);
  console.log(start);
  console.log(end);
  let currentDate = start; // 当前日期初始化为起始日期
  const datesArray = []; // 存放所有日期的数组
  while (currentDate <= end) {
    datesArray.push(dayjs(currentDate).format("YYYY-MM-DD")); // 添加到数组中
    currentDate.setDate(currentDate.getDate() + 1); // 递增一天
  }

  return datesArray;
}
</script>
<style lang="scss">
.wrap{
  .el-card__body{
    padding:10px;
  }
}
</style>
<style lang="scss" scoped>
.wrap {
  .order-card {
    .itemicon {
      color: var(--el-color-primary);
    }
  }
  .live-card {
    .itemicon {
      color: var(--el-color-error);
    }
  }
  .card {
    border-radius: 10px;
    padding: 15px;
    &:hover {
      box-shadow: var(--el-box-shadow-light);
    }
    .content {
    }
  }
  .tit {
    color: var(--el-text-color);
  }
  .livebg {
    background-color: var(--el-color-error-light-9);
    border: 1px solid var(--el-color-error-light-8);
    .itemicon {
      color: var(--el-color-error);
    }
    .num {
      color: var(--el-color-error);
    }
    //background-color:#fff;
  }
  .orderbg {
    background-color: var(--el-color-primary-light-9);
    border: 1px solid var(--el-color-primary-light-8);
    .itemicon {
      color: var(--el-color-primary);
    }
    .num {
      color: var(--el-color-primary);
    }
  }
  .cartbg {
    background-color: var(--el-color-blue-light-9);
    border: 1px solid var(--el-color-blue-light-8);
    .itemicon {
      color: var(--el-color-blue);
    }
    .num {
      color: var(--el-color-blue);
    }
  }
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .mob-card-header {
    display: flex;
    flex-direction: column;
  }
  .box-card {
    border: none;
  }

  .itemChart {
    height: 360px;
  }
}
</style>
